<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>
    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc v-bind="baseOption" :data="form">
    </ex_super_desc>
    <ex_header_spiler :title="$tt('label_contact_info')" />
    <ex_super_desc v-bind="contactOption" :data="form">
    </ex_super_desc>
    <ex_header_spiler :title="$tt('label_business_data')" />
    <ex_super_desc v-bind="businessOption" :data="form">
    </ex_super_desc>





  </div>
</template>
<script>
import { mapState } from "vuex";

let default_obj = {
  companyName: "",
  hasWarehouse: [],
  assignWarehouseList: [],
  companySaleName: '',
  companyCserName: ''
}
import router_params from '@/mixin/router_params';

export default {
  title: 'label_customer_detial',
  mixins: [router_params],
  components: {},

  data() {
    return {
      loading: false,
      form: _.cloneDeep(default_obj),
      baseOption: {
        attrs: this.$defaultDetailDescAttrs,
        model: [
          {
            key: 'companyName', label: 'label_company_name',
            render: (h, { data, item }) => this.$renderText(h, data[item.key]),
          },
          { key: 'companyCode', label: 'label_company_code', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'companyShortName', label: 'label_company_short', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },

          { key: 'companyCreditCode', label: 'label_unified_credit_code', if: (data) => data.addressType !== "OVERSEAS", render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'companyCreditCode', label: 'label_business_registration_number', if: (data) => data.addressType === "OVERSEAS", render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'legalPerson', label: 'label_legal_person_name', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'legalIdNo', label: 'label_corporate_ID_number', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'companyTel', label: 'label_company_landline', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'country', label: 'label_country', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },

          { key: 'email', label: 'label_mailbox', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },

          {
            key: "addressType", label: "label_register_address_type",
            render: (h, { data, item }) => this.$renderText(h, this.$enumShow(data[item.key], "UserCompanyAddressType"))
          },

          {
            key: 'registAddress', label: 'label_register_address', span: 2,
            render: (h, { data, item }) => {
              const text = data[item.key] && data[item.key].length == 3 ? _.takeRight(data[item.key], 2).filter(it => it).join('/') : ""
              return this.$renderText(h, text)
            },
          },
          {
            key: 'mailAddress', label: 'label_mail_address',
            render: (h, { data, item }) => {
              const text = data[item.key] && data[item.key].length == 3 ? _.takeRight(data[item.key], 2).filter(it => it).join('/') : ""
              return this.$renderText(h, text)
            },
          },
          {
            if: (data) => data.addressType == "OVERSEAS",
            key: "companyRegistNo", label: "label_company_registration_card_number",
            render: (h, { data, item }) => this.$renderText(h, data[item.key])
          },
          {
            key: "legalIdNoFiles", label: "label_Attachment_Corporate_Identity_Card", span: 3,
            render: (h, { data, item }) => {

              if (!data[item.key]) {
                return this.$renderText(h, data[item.key])
              }
              const piclist = data.legalIdNoFiles
              return h('div', {}, piclist.map(it => {
                return h('ex_image_view', {
                  style: { width: '100px', height: '100px' },
                  class: 'border_normal mg_1',
                  props: { lazy: true, fit: 'fill', src: it, 'preview-src-list': piclist }
                })
              }))
            }

          },

          {
            key: "licenseFile", label: "label_Business_License_Attachment", span: 2,
            render: (h, { data, item }) => {
              if (!data[item.key]) {
                return this.$renderText(h, data[item.key])
              }
              const piclist = [data.licenseFile]
              return h('div', {}, piclist.map(it => {
                return h('ex_image_view', {
                  style: { width: '100px', height: '100px' },
                  class: 'border_normal mg_1',
                  props: { lazy: true, fit: 'fill', src: it, 'preview-src-list': piclist }
                })
              }))
            }
          },



          {
            if: (data) => data.addressType == "OVERSEAS", span: 2,
            key: "companyRegistFile", label: "label_company_registration_card",
            render: (h, { data }) => {
              if (_.isEmpty(data.companyRegistFile)) {
                return this.$renderText(h, data.companyRegistFile)
              }
              const piclist = [data.companyRegistFile]
              return h('div', {}, piclist.map(it => {
                return h('ex_image_view', {
                  style: { width: '100px', height: '100px' },
                  class: 'border_normal mg_1',
                  props: { lazy: true, fit: 'fill', src: it, 'preview-src-list': piclist }
                })
              }))
            }
          },
        ],
      },
      contactOption: {
        attrs: this.$defaultDetailDescAttrs,
        model: [
          { key: 'contactName', label: 'label_contact_name', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'contactIdNo', label: 'label_contact_idcard_number', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'contactPhone', label: 'label_contact_phone', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },

          { key: 'contactPosition', label: 'label_contact_job', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
        ],
      },
      businessOption: {
        attrs: this.$defaultDetailDescAttrs,
        model: [
          {
            key: 'returnProcessMethodList', label: 'label_sku_return_method', span: 2,
            render: (h, { data, item }) => this.$renderText(h, data[item.key] ? data[item.key].map(it => this.$enumShow(it, 'SkuReturnMethodEnum')).join('/') : null),
            // formatter: (r, c, v, i) => v ? v.map(it => this.$enumShow(it, 'SkuReturnMethodEnum')).join('/') : this.$tt('data_temp_none')
          },
          { key: 'companyCserName', label: 'label_customer_service_rep', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          { key: 'companySaleName', label: 'label_sales_rep', render: (h, { data, item }) => this.$renderText(h, data[item.key]), },
          {
            key: 'hasWarehouse', label: 'label_has_assign_warehouse', span: 2,
            render: (h, { data }) => {

              const list = data.hasWarehouse && data.hasWarehouse.length > 0 ? data.hasWarehouse.map((it, i) => (
                <div>{(i + 1)}. {(it.name)}</div>
              )) : this.$renderText(h, null)
              return (
                <div>
                  {list}
                </div>
              )
            }
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({ allWarehouseMap: state => state.allWarehouseMap }),
  },
  methods: {
    init_data_default(into_params) {
      this.form = _.cloneDeep(default_obj)
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: this.$url['ums/customerDetail'],
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.form = res.data
            this.fixTabLabel()
            if (this.form.companyWarehouseIds) {
              this.form.hasWarehouse = this.form.companyWarehouseIds.map(it => this.allWarehouseMap[it]).filter(it=>it)
            }
          },
          complete: () => {
            this.loading = false
          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      if (!!this.form.id) {
        this.$emit("tagModifyLabel", {
          _key: 'label_name_code', name: this.$tt("label_customer_detial"),
          code: this.form.companyName || ""
        })
      } else {
        this.$emit("tagModifyLabel", "label_customer_detial")
      }
    },

  }
};

</script>
<style></style>
